<template>
  <el-dialog
    :model-value="dialogForm.show"
    :title="dialogForm.title"
    :draggable="dialogForm.draggable"
    @close="close(ruleFormRef)"
    width="40%"
  >
    <el-form :model="form" ref="ruleFormRef" :rules="rules">
      <el-form-item
        label="名称"
        :label-width="dialogForm.formLabelWidth"
        prop="pname"
      >
        <el-input
          v-model="form.pname"
          autocomplete="off"
          @input="getNameValue"
        />
      </el-form-item>
      <el-form-item
        label="来源者"
        :label-width="dialogForm.formLabelWidth"
        prop="pauthor"
      >
        <el-input
          v-model="form.pauthor"
          autocomplete="off"
          @input="getNameValue"
        />
      </el-form-item>
      <el-form-item
        label="类型"
        :label-width="dialogForm.formLabelWidth"
        prop="ptype"
      >
      <el-select v-model="form.ptype" @change="getNameValue" placeholder="请选择状态">
          <el-option v-for="type in types " :key="type.id" :label="type.tname" :value="type.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="图片" :label-width="dialogForm.formLabelWidth">
        <UpdateImg :cover="form.cover" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import UpdateImg from "@/components/UpdateImg.vue";
import { ref, reactive, onMounted } from "vue";
const emit = defineEmits(["getFormData", "changeDialog", "submitForm"]);
const ruleFormRef = ref();
const rules = reactive({
  pname: [{ required: true, trigger: "blur", message: "名称必须填写" }],
  ptype: [{ required: true, trigger: "blur", message: "类型必须填写" }],
  cover: [{ required: true, trigger: "blur", message: "封面必须上传" }],
});
const props = defineProps({
  form: Object,
  dialogForm: Object,
  types:Array
});
//获取名称值
const getNameValue = (val) => {
  emit("getFormData", "name", val);
};

//获取名称值
const getDescValue = (val) => {
  emit("getFormData", "desc", val);
};

//关闭对话框
const close = (formEl) => {
  formEl.resetFields();
  emit("changeDialog");
};

//提交表单
const submit = () => {
  emit("submitForm");
};
</script>

<style lang="scss" scoped>
</style>
